// 该文件用于创建整个应用的路由器
import VueRouter from 'vue-router'

import About from '@/pages/About'
import Home from '@/pages/Home'
import Message from '@/pages/Message'
import News from '@/pages/News'
import Deatil from '@/pages/Detail'


// 创建并暴露一个路由器
const router =  new VueRouter({
    routes:[
        {   
            path:"/about",
            component:About,
            meta:{title:'关于'}
        },
        {
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            // 子级目录
            children:[
                {
                    path:'news',
                    component:News,
                    meta:{title:'新闻',isAuth:true},
                },
                {
                    // 注意子级目录不需要加 / !!!!!
                    path:'message',
                    component:Message,
                    meta:{title:'信息',isAuth:true},
                    children:[
                        {
                            // 命名路由，可以直接 :to="{name = "xiangqing"}"
                            name:'xiangqing',
                            // 使用 Params 参数时，使用占位声明接收 params 参数
                            path:'detail',
                            component:Deatil,
                            meta:{title:'详情',isAuth:true},
                            // props 的第一种写法，值为对象，该对象中的所有key-value 都会一props的形式传给Detatil组件
                            // props:{a:1,b:'Hello'}

                            // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有 params参数，以props的形式传给Detail组件
                            // props:true

                            // props的第三种写法，值为函数
                            props($route){
                                return {
                                    id : $route.query.id,
                                    title:$route.query.title
                                }
                            }


                        }
                    ]
                },
            ]
        },
    ]
})
// 存入磁盘标记
localStorage.setItem('token',"bian1");

// 全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{

    // 是否需要权限验证
    if(to.meta.isAuth){
        if(localStorage.getItem('token') === 'bian'){
            // 放行
            next();
        }else{
            alert('您没有权限访问')
        }

    }else{
        // 放行
        next();
    }
})

// 全局后置守卫————初始化的时候被调用、每次路由切换之前被调用
router.afterEach((to,from)=>{
    document.title = to.meta.title ||  '新闻系统';
})

export default router ;
